<template>
    <div ref="chartDom" :style="{ width: '100%', height: '530px' }"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'

const chartDom = ref()
let chart

const initChart = () => {
    chart = echarts.init(chartDom.value)
    chart.setOption({
        title: {
            text: '会员卡统计',
            subtext: '绑定的会员卡数量',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data:[
                '金卡',
                '银卡',
                '铜卡',
                '水彩体验卡',
                '涂鸦体验卡',
            ]
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        series: [
            {
                name: '会员卡类型',
                type: 'pie',
                radius: [50, 200], // 内外半径
                center: ['50%', '50%'],
                roseType: 'area', // 使用Nightingale图的关键设置
                itemStyle: {
                    borderRadius: 15
                },
                label: {
                    show: true
                },
                emphasis: {
                    label: {
                        show: true,
                    }
                },
                data: [
                    { value: 7, name: '金卡' },
                    { value: 3, name: '银卡' },
                    { value: 3, name: '铜卡' },
                    { value: 4, name: '水彩体验卡' },
                    { value: 4, name: '涂鸦体验卡' },
                ],
            }
        ]
    })
}

onMounted(() => {
    initChart()
})
</script>

<style scoped>
/* 可根据需要添加样式 */
</style>
